<template>
  <div class="wechatPayment">
    <el-col v-bind="grid">
      <el-form ref="refWechatPayment" :model="modelPayment" :rules="rulesPayment" label-position="right" label-width="150px">
        <el-form-item prop="isOpen">
          <template v-slot:label>开启 <el-tooltip class="item" effect="dark" content="是否启用微信支付" placement="top-start"><i class="el-icon-info" /></el-tooltip></template>
          <el-radio-group v-model="modelPayment.isOpen">
            <el-radio :label="0">开启</el-radio>
            <el-radio :label="1">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="mchId">
          <template v-slot:label>Mchid <el-tooltip class="item" effect="dark" content="商户号" placement="top-start"><i class="el-icon-info" /></el-tooltip></template>
          <el-input v-model="modelPayment.mchId" placeholder="商户号"></el-input>
        </el-form-item>
        <el-form-item prop="key">
          <template v-slot:label>Key <el-tooltip class="item" effect="dark" content="证书密钥" placement="top-start"><i class="el-icon-info" /></el-tooltip></template>
          <el-input v-model="modelPayment.key" placeholder="证书密钥"></el-input>
        </el-form-item>
        <el-form-item prop="cert_SerialNumber">
          <template v-slot:label>序列号 <el-tooltip class="item" effect="dark" content="序列号" placement="top-start"><i class="el-icon-info" /></el-tooltip></template>
          <el-input v-model="modelPayment.cert_SerialNumber" placeholder="序列号"></el-input>
        </el-form-item>
        <!--以弃用【start】-->
        <!--<el-form-item prop="cert">
          <template v-slot:label>微信支付证书 <el-tooltip class="item" effect="dark" content="微信支付证书，在微信商家平台中可以下载！文件名一般为***.p12" placement="top-start"><i class="el-icon-info" /></el-tooltip></template>
          <group
            :isImg="1"
            :isShow="!Boolean(modelPayment.cert)"
            @clickHandler0="modelPayment.cert = ''"
            @fileUploadGroup="fileUploadGroup"
          />
        </el-form-item>-->
        <!--以弃用【end】-->

        <el-form-item prop="pem_Cert">
          <template v-slot:label>微信支付证书 <el-tooltip class="item" effect="dark" content="微信支付证书，在微信商家平台中可以下载！文件名一般为apiclient_cert.pem" placement="top-start"><i class="el-icon-info" /></el-tooltip></template>
          <group :isImg="1" :isShow="!Boolean(modelPayment.pem_Cert)" @clickHandler0="modelPayment.pem_Cert = ''" @fileUploadGroup="pemCertGroup"></group>
        </el-form-item>
        <el-form-item prop="pem_Key">
          <template v-slot:label>微信支付证书密钥 <el-tooltip class="item" effect="dark" content="微信支付证书密钥，在微信商家平台中可以下载！文件名一般为apiclient_key.pem" placement="top-start"><i class="el-icon-info" /></el-tooltip></template>
          <group :isImg="1" :isShow="!Boolean(modelPayment.pem_Key)" @clickHandler0="modelPayment.pem_Key = ''" @fileUploadGroup="pemKeyGroup"></group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('refWechatPayment')">立即提交</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </div>
</template>

<script>
import { getWxPayConfigApi, PUTWxPayConfigApi } from '@/api/setting'
import group from '@/components/Group'

export default {
  name: 'WechatPayment',
  components: {
    group
  },
  data() {
    return {
      grid: {
        xl: 8,
        lg: 9,
        md: 12,
        sm: 12,
        xs: 24
      },
      modelPayment: {
        isOpen: 0,
        mchId: '',
        key: '',
        // cert: '',
        cert_serialNumber: '',
        pem_Cert: '',
        pem_Key: ''
      },
      rulesPayment: {
        isOpen: [
          { required: true, message: '请选择是否开启微信支付', trigger: 'change' }
        ],
        mchId: [
          { required: true, message: '请输入mchId', trigger: 'blur' }
        ],
        key: [
          { required: true, message: '请输入证书密钥', trigger: 'blur' }
        ],
        cert_SerialNumber: [
          { required: true, message: '请输入序列号', trigger: 'blur' }
        ],
        /*cert: [
          { required: true, message: '请上传支付证书', trigger: 'change' }
        ],*/
        pem_Cert: [
          { required: true, message: '请上传微信支付证书', trigger: 'change' }
        ],
        pem_Key: [
          { required: true, message: '请上传微信支付证书密钥', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.getPaymentList()
    })
  },
  methods: {
    // 文件上传成功之后的回调
    pemCertGroup(file) {
      this.$set(this.modelPayment, 'pem_Cert', file.path)
    },
    // 文件上传成功之后的回调
    pemKeyGroup(file) {
      this.$set(this.modelPayment, 'pem_Key', file.path)
    },
    // 文件上传成功之后的回调
    /*fileUploadGroup(file) {
      console.log("文件上传成功之后的回调：", file);
      this.$set(this.modelPayment, 'cert', file.path)
    },*/
    getPaymentList() {
      getWxPayConfigApi().then(res => {
        this.$set(this, 'modelPayment', res)
      });
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          PUTWxPayConfigApi(this.modelPayment).then(() => {
            this.getPaymentList()
            this.$message.success('修改成功！')
          })
        } else {
          this.$message.error('验证失败！')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .wechatPayment {
  }
</style>
